<template>
	<view class="search_maintain">
		<!-- 取消图标 -->
		<view class="cancel_icon_view">
			<uni-icons type="closeempty" size="27" color="rgb(42,44,54)" @click="cancelSearchReturn"></uni-icons>
		</view>
		<!-- 输入框 -->
		<view class="input_search_btn">
			<view class="input_easy_input">
				<uni-easyinput prefixIcon="search" v-model="keyValue" placeholder="想搜什么？" @iconClick="iconClick"
					style="width: 500rpx;" @confirm="iconClick">
				</uni-easyinput>
			</view>
			<view class="search_btn" @click="iconClick">
				<button>搜索</button>
			</view>
		</view>

		<view class="search-history-guess-hot-topic" v-show="!isResultShow">
			<!-- 搜索历史 (最多显示12个)-->
			<view class="search_history_view" v-if="searchHistoryList.length > 0">
				<view class="search_history_text_delete_icon">
					<view class="search_history_text">
						搜索历史
					</view>
					<view class="delete_icon" @click="deleteAllSearchHistory">
						<uni-icons type="trash" size="20" color="#8d8d8d"></uni-icons>
					</view>
				</view>
				<view class="search_history_contain">
					<view class="search_history_per" v-for="(item,index) in searchHistoryList" :key="index"
						@click="clickSearchHistoryLabel(item)">
						{{item}}
					</view>
				</view>
			</view>

			<!-- 猜你想搜 -->
			<view class="guess_want_search_text">
				猜你想搜
			</view>
			<view class="guess_search_main">
				<view class="want_search_per" v-for="(item,index) in wangSearchList" :key="index">
					<view class="want_search_content">
						{{item.content}}
					</view>
					<view class="wangt_search_icon" v-if="item.isHaveLabel">
						<image :src="item.labelUrl" mode="aspectFill" class="label_image"></image>
					</view>
				</view>
			</view>
			<!-- 热门话题 -->
			<view class="hot_conversation_main">
				<view class="hot_conversation_text_icon">
					<view class="hot_conversation_text">
						热门话题
					</view>
					<view class="hot_conversation_icon">
						<uni-icons type="right"></uni-icons>
					</view>
				</view>
				<view class="converstion_list_main">
					<view class="conversation_per" v-for="(item,index) in conversationList" :key="index">
						<view class="conversation_left">
							<view class="serial_number" :style="{'backgroundColor': item.serialNumBgColorRgb}">
								{{item.serialNum}}
							</view>
							<view class="conversation_content">
								{{item.conversationContent}}
							</view>
							<view class="conversation_icon">
								<image :src="item.conversationIconUrl" mode="aspectFill"
									class="conversation_icon_image">
								</image>
							</view>
						</view>
						<view class="conversation_canyu_people_num">
							{{item.canyuNum}}人参与
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 搜索结果 -->
		<view class="search-result-content" v-show="isResultShow">
			<search-result></search-result>
		</view>

	</view>
</template>

<script>
	import searchResult from '../../search/searchResult.vue';
	import {
		getSearchAllInfo,
		deleteHistorySearchKeys,
		addSearchHistory
	} from '@/request/recover.js';
	export default {
		components: {
			searchResult
		},
		data() {
			return {
				isResultShow: false, // 搜索结果是否展示
				keyValue: '', // 输入的关键词
				wangSearchList: [{
						content: '6亿补贴',
						isHaveLabel: true,
						labelUrl: '/static/icons/HOT.png'
					},
					{
						content: '天天优惠',
						isHaveLabel: false,
						labelUrl: ''
					},
					{
						content: '露营车',
						isHaveLabel: true,
						labelUrl: '/static/icons/HOT.png'
					},
					{
						content: '咖啡杯',
						isHaveLabel: true,
						labelUrl: '/static/icons/new.png'
					},
					{
						content: '折叠椅',
						isHaveLabel: false,
						labelUrl: ''
					},
					{
						content: '月亮椅',
						isHaveLabel: true,
						labelUrl: '/static/icons/new.png'
					},
					{
						content: '折叠凳',
						isHaveLabel: false,
						labelUrl: ''
					},
					{
						content: '户外折叠椅',
						isHaveLabel: false,
						labelUrl: ''
					},
					{
						content: '山地自行车',
						isHaveLabel: true,
						labelUrl: '/static/icons/new.png'
					},
					{
						content: '摆摊小推车',
						isHaveLabel: false,
						labelUrl: ''
					},
				],
				conversationList: [{
						serialNum: '1',
						serialNumBgColorRgb: 'rgb(255, 115, 108)',
						conversationContent: '#疆屿研发山地自行车即将问世',
						conversationIconUrl: '/static/icons/HOT.png',
						canyuNum: '342'
					},
					{
						serialNum: '2',
						serialNumBgColorRgb: 'rgb(247, 136, 38)',
						conversationContent: '#今日出行',
						conversationIconUrl: '/static/icons/new.png',
						canyuNum: '300'
					},
					{
						serialNum: '3',
						serialNumBgColorRgb: 'rgb(255, 173, 58)',
						conversationContent: '#冬天即将来临',
						conversationIconUrl: '/static/icons/new.png',
						canyuNum: '215'
					},
					{
						serialNum: '4',
						serialNumBgColorRgb: '#e0dfe5',
						conversationContent: '#人人都是旅拍大佬',
						conversationIconUrl: '/static/icons/new.png',
						canyuNum: '156'
					},
					{
						serialNum: '5',
						serialNumBgColorRgb: '#e0dfe5',
						conversationContent: '#打造疆屿新一代产品',
						conversationIconUrl: '/static/icons/new.png',
						canyuNum: '105'
					},
				],
				searchHistoryList: [
					'挎包', '美食', '梅赛德斯', '奔驰', '风扇', '香奈儿'
				],

			}
		},
		onLoad() {
			// 调整热门话题列表里面的content内容长度
			this.changeConversationContenLength();

			// 获取搜索页面的搜索历史，猜你想搜，热门话题
			this.getSearchAllInfo();

		},
		methods: {
			
			// 获取搜索页面的搜索历史，猜你想搜，热门话题
			getSearchAllInfo() {
				getSearchAllInfo().then(res => {
					// console.log(res);
					// 猜你想搜
					let wanglist = [];
					res.data.data.guessSearchResults.forEach((item) => {
						let labelUrl = '';
						if (item.haveLabel && item.labelName === 'new') {
							labelUrl = '/static/icons/new.png';
						} else if (item.haveLabel && item.labelName === 'hot') {
							labelUrl = '/static/icons/HOT.png';
						}
						let element = {
							content: item.name.substring(0, 7),
							isHaveLabel: item.haveLabel,
							labelUrl: labelUrl,
						}
						wanglist.push(element);
					})
					this.wangSearchList = wanglist;

					// 搜索历史
					let searchs = [];
					res.data.data.searchHistories.forEach((item) => {
						searchs.push(item.name)
					})
					this.searchHistoryList = searchs;

					// 热门话题
					let hotTopics = [];
					const arr = res.data.data.topics;
					for (let index = 0; index < res.data.data.topics.length; index++) {
						let conversationIconUrl = '';
						if (arr[index].haveLabel && arr[index].labelName === 'new') {
							conversationIconUrl = '/static/icons/new.png';
						} else if (arr[index].haveLabel && arr[index].labelName === 'hot') {
							conversationIconUrl = '/static/icons/HOT.png';
						}
						let element = {
							serialNum: (index + 1).toString(),
							serialNumBgColorRgb: '#e0dfe5',
							conversationContent: '#' + arr[index].name,
							conversationIconUrl: conversationIconUrl,
							canyuNum: arr[index].joinCount
						}
						hotTopics.push(element);
					}
					hotTopics.forEach((item) => {
						if (item.serialNum === '1') {
							item.serialNumBgColorRgb = 'rgb(255, 115, 108)';
						} else if (item.serialNum === '2') {
							item.serialNumBgColorRgb = 'rgb(247, 136, 38)';
						} else if (item.serialNum === '3') {
							item.serialNumBgColorRgb = 'rgb(255, 173, 58)';
						} else {
							item.serialNumBgColorRgb = '#e0dfe5';
						}
					})
					this.conversationList = hotTopics;
				}).catch(err => {
					console.log(err);
				});
			},

			// 点击搜索图标
			iconClick() {
				if (this.keyValue.trim() === '') {
					uni.showToast({
						title: '请输入关键词',
						icon: 'none'
					})
				} else {
					// 点击搜索，或者回车，搜索的keyValue都要回到后端（如果此用户搜索过，那就数量+1；如果没搜索过就要新建一条记录）
					const param = {
						keyValue: this.keyValue,
					}
					addSearchHistory(param).then(res => {
						if (res.data.code === 10000) {
							// uni.showLoading({
							// 	title: '加载中...',
							// })
							// setTimeout(()=>{
							// 	uni.hideLoading()
							// 	this.isResultShow = true
							// },600)
							this.getSearchAllInfo()
						} else {
							if (!this.searchHistoryList.includes(this.keyValue)) {
								this.searchHistoryList.push(this.keyValue)
							}
						}
					}).catch(err => {
						console.log(err);
						if (!this.searchHistoryList.includes(this.keyValue)) {
							this.searchHistoryList.push(this.keyValue)
						}
					})
				}

			},
			// 点击“X”取消图标返回上一页
			cancelSearchReturn() {
				uni.navigateBack();
			},
			// 调整热门话题列表里面的content内容长度
			changeConversationContenLength() {
				const newConversationList = this.conversationList.map((item) => {
					var newContent = item.conversationContent;
					if (item.conversationContent.length > 6) {
						newContent = item.conversationContent.substring(0, 7).toString() + '...';
					}
					return {
						...item,
						conversationContent: newContent
					};
				});
				this.conversationList = newConversationList;
			},
			// 点击搜索历史标签
			clickSearchHistoryLabel(searchString) {
				this.keyValue = searchString;
			},

			// 点击删除图标删除所有搜索历史
			deleteAllSearchHistory() {
				const _this = this;
				uni.showModal({
					title: '确定删除所有搜索历史吗？',
					success(res) {
						if (res.confirm) {
							deleteHistorySearchKeys().then(res => {
								if (res.data.code === 10000) {
									_this.searchHistoryList = [];
									uni.showToast({
										title: '删除成功！'
									});
								} else {
									uni.showToast({
										title: '删除失败',
										icon: 'error'
									})
								}
							}).catch(err => {
								console.log(err);
								uni.showToast({
									title: '删除失败',
									icon: 'error'
								})
							});

						} else if (res.cancel) {
							console.log('用户取消');
						}
					}
				});
				this.getSearchAllInfo();
			},
		}
	}
</script>

<style scoped>
	.search_maintain {
		padding-top: 60rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
		overflow-x: hidden;
		padding-bottom: 50rpx;
	}

	.cancel_icon_view {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 20px;
	}

	.guess_search_main {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.guess_want_search_text {
		font-size: 18px;
		color: #66596b;
		letter-spacing: 2px;
		margin-top: 40px;
		font-weight: bold;
	}

	.label_image {
		width: 30px;
		height: 18px;
	}

	.want_search_per {
		width: 50%;
		display: flex;
		flex-direction: row;
		margin-top: 20px;
	}

	.want_search_content {
		font-size: 16px;
		margin-right: 2rpx;
		letter-spacing: 1px;
	}

	.hot_conversation_main {
		margin-top: 50px;
	}

	.hot_conversation_text_icon {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.hot_conversation_text {
		font-size: 18px;
		color: #66596b;
		font-weight: bold;
		letter-spacing: 2px;
	}

	.conversation_icon_image {
		width: 30px;
		height: 18px;
	}

	.conversation_per {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 15px;
	}

	.conversation_left {
		display: flex;
		flex-direction: row;
	}

	.serial_number {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		text-align: center;
		color: aliceblue;
		margin-right: 7px;
	}

	.conversation_content {
		font-size: 15px;
		letter-spacing: 1px;
		margin-right: 7px;
	}

	.conversation_canyu_people_num {
		color: #a09fa4;
		letter-spacing: 1px;
		width: 180rpx;
		text-align: right;
	}

	.search_history_view {
		margin-top: 80rpx;
	}

	.search_history_text_delete_icon {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.search_history_text {
		font-size: 18px;
		color: #66596b;
		letter-spacing: 2px;
		font-weight: bold;
	}

	.search_history_contain {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 90%;
		margin-top: 20rpx;
	}

	.search_history_per {
		padding: 15rpx;
		border: 1px solid;
		border-color: #afaeb3;
		border-radius: 20rpx;
		margin-right: 25rpx;
		margin-bottom: 25rpx;
	}

	.converstion_list_main {
		margin-top: 30rpx;
	}

	.input_search_btn {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.search_btn button {
		width: 160rpx;
		height: 65rpx;
		font-size: 30rpx;
		color: #fff;
		background-color: #66596b;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		letter-spacing: 2px;
	}
</style>